<%@ page import="java.util.Calendar" %>
<%@ page import="java.util.Date" %>
<%@ page import="com.sophie.entity.User" %>
<%@ page import="java.util.List" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoveU-遇见更好的你</title>
    <link rel="stylesheet" href="<%=basePath%>/css/main.css">
    <link rel="shortcut icon" href="<%=basePath%>/img/男女混合.png" type="image/x-icon">
    <script src="<%=basePath%>/js/jquery-3.6.3.min.js"></script>
    <script src="<%=basePath%>/js/jquery.validate.min.js"></script>

</head>

<body>

<%@include file="top.jsp" %>

<span>${errTip}</span>>
<div class="content">

    <c:if test="${not empty user}">
        <div class="user-item">
            <div class="name" style="font-weight: bold;color: #6f6dff">
                我
            </div>
            <c:choose>
                <c:when test="${not empty user.gender && user.gender == '男'}"><img src="<%=basePath%>/img/男.png" alt=""
                                                                                    class="gender"></c:when>
                <c:when test="${not empty user.gender && user.gender == '女'}"><img src="<%=basePath%>/img/女.png" alt=""
                                                                                    class="gender"></c:when>
                <c:otherwise><img src="<%=basePath%>/img/性别-未知.png" alt="" class="gender"></c:otherwise>
            </c:choose>

            <img src="<%=basePath%>/img/朋友圈.png" alt="" class="zone" data-id="${user.id}">
            <c:choose>

                <c:when test="${not empty user.avatar}">
                    <img src="${user.avatar}" alt="" class="user-avatar">
                </c:when>
                <c:otherwise>
                    <img src="<%=basePath%>/img/水豚.webp" alt="" class="user-avatar">
                </c:otherwise>
            </c:choose>

            <div class="age">
                    ${user.birthday}
            </div>
            <div class="address">
                <c:if test="${user.address==null}">请点击右上角头像填写地址资料</c:if>
                <c:if test="${user.address!=null}">${user.address}</c:if>
            </div>
            <div class="education">
                <c:if test="${user.education==null}">请点击右上角头像填写学历资料</c:if>
                <c:if test="${user.education!=null}">${user.education}</c:if>
            </div>
            <div class="character">
                <c:if test="${not empty user.likeType}">
                    <c:set var="personalityTypes" value="${user.likeType}"/>
                    <c:set var="personalityArray" value="${fn:split(personalityTypes, '-')}"/>
                    <c:forEach var="personality" items="${personalityArray}">
                        <span>${personality}</span>
                    </c:forEach>
                </c:if>
                <c:if test="${empty user.likeType}">
                    <span>快去</span>
                    <span>填写</span>
                    <span>资料</span>
                </c:if>
            </div>
            <div class="motto">
                <c:if test="${user.motto==null}">请点击右上角头像填写个性签名</c:if>
                <c:if test="${user.motto!=null}">${user.motto}</c:if>
            </div>
            <div class="mylike">
                <span>我的卡片</span>
            </div>
        </div>
    </c:if>




    <c:forEach items="${resultVO.data}" var="item">
        <c:if test="${item.id != user.id}">
            <div class="user-item">
                <div class="name">
                        ${item.name}
                </div>
                <c:choose>
                    <c:when test="${not empty item.gender && item.gender == '男'}">
                        <img src="<%=basePath%>/img/男.png" alt="" class="gender">
                    </c:when>
                    <c:when test="${not empty item.gender && item.gender == '女'}">
                        <img src="<%=basePath%>/img/女.png" alt="" class="gender">
                    </c:when>
                    <c:otherwise>
                        <img src="<%=basePath%>/img/性别-未知.png" alt="" class="gender">
                    </c:otherwise>
                </c:choose>

                <img src="<%=basePath%>/img/朋友圈.png" alt="" class="zone" data-id="${item.id}">


                <c:choose>
                    <c:when test="${item.avatar != null}">
                        <img src="${item.avatar}" alt="" class="user-avatar">
                    </c:when>
                    <c:otherwise>
                        <img src="<%=basePath%>/img/水豚.webp" alt="" class="user-avatar">
                    </c:otherwise>
                </c:choose>

                <div class="age">
                    <c:if test="${item.birthday ==null}">
                        <span style="color: red">请点击页面右上角头像填写生日</span>
                    </c:if>
                    <c:if test="${item.birthday !=null}">${item.birthday}</c:if>
                </div>
                <div class="address">
                    <c:if test="${item.address==null}">
                        <span style="color: red">请点击页面右上角头像填写地址</span>
                    </c:if>
                    <c:if test="${item.address!=null}">${item.address}</c:if>
                </div>
                <div class="education">
                    <c:if test="${item.education==null}">
                        <span style="color: red">请点击页面右上角头像填写学历</span>
                        </c:if>
                    <c:if test="${item.education!=null}">${item.education}</c:if>
                </div>
                <div class="character">
                    <c:if test="${not empty item.likeType}">
                        <c:set var="personalityTypes" value="${item.likeType}"/>
                        <c:set var="personalityArray" value="${fn:split(personalityTypes, '-')}"/>
                        <c:forEach var="personality" items="${personalityArray}">
                            <span>${personality}</span>
                        </c:forEach>
                    </c:if>
                    <c:if test="${empty item.likeType}">
                        <span>快去</span>
                        <span>填写</span>
                        <span>资料</span>
                    </c:if>
                </div>
                <div class="motto">
                    <c:if test="${item.motto==null}"><span style="color: red">请点击页面右上角头像填写个性签名</span></c:if>
                    <c:if test="${item.motto!=null}">${item.motto}</c:if>
                </div>

                <div class="like" data-id="${item.id}">
                    <img src="<%=basePath%>/img/喜欢.png" alt="" class="follow">
                    <img src="<%=basePath%>/img/不喜欢.png" alt="" class="ignore">
                </div>
            </div>
        </c:if>
    </c:forEach>


</div>


<%@include file="myFooter.jsp" %>
<script>
    //检查是否关注该用户
    $(".like").each(function () {
        let like = $(this);
        var id = like.attr("data-id");
        console.log(id);
        $.ajax({
            url: "FollowServlet?method=checkFollow",
            type: "post",
            data: {"id": id},
            success: function (data) {
                if (data.code == 0) {
                    console.log("关注了该用户")
                    like.empty();
                    like.html("<span>你关注了ta</span>")
                }
            }
        })
    });

    //把生日转换成年龄
    $(document).ready(function () {
        // 遍历所有.age元素
        $('.age').each(function () {
            var birthdayStr = $(this).text().trim();
            //console.log("birthdayStr"+birthdayStr)
            var birthday = new Date(birthdayStr); // 尝试将字符串转换为Date对象
            // 检查日期是否有效//console.log(""+)
            // console.log("birthday" + birthday)
            if (isNaN(birthday.getTime())) {
                //console.log('Invalid date:', birthdayStr);
                return; // 如果日期无效，则跳过当前迭代
            }
            var today = new Date(); // 获取当前日期
            var age = today.getFullYear() - birthday.getFullYear();
            var m = today.getMonth() - birthday.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthday.getDate())) {
                age--;
            }

            // 将年龄设置回元素中（或者你可以根据需要设置到另一个元素）
            $(this).text("年龄：" + age); // 注意：这将覆盖原始的日期字符串
        });
    });

    //点击进入个人空间
    $('.zone').click(function () {
        var oid = $(this).attr('data-id');
        window.location.href = "ZoneServlet?method=objectZone&oid=" + oid;
    });

    //点击爱心关注该用户
    $('.follow').click(function () {
        var like = $(this).parent()
        let id = $(this).parent().attr('data-id');
        //console.log(id);
        $.ajax({
            url: "UserServlet?method=follow",
            type: "post",
            data: {"id": id},
            success: function (data) {
                if (data.code == 0) {
                    alert("关注成功!");
                    like.empty();
                    like.html("<span>你关注了ta</span>")
                } else {
                    alert("关注失败!");
                }
            }
        })
    })

    //点击碎裂的爱心频闭该用户
    $('.ignore').click(function () {
        var like = $(this).parent()
        let id = $(this).parent().attr('data-id');
        alert("同学一场,为什么要屏蔽他呢?一起好好交流下吧~")
    })


</script>

</body>

</html>